<template>
  <div class="she-container">
    <!-- 原有头部导航代码 -->
    <el-header class="header">
      <div class="logo">
        <img src="@/logo/1.png" alt="系统logo" class="logo-img">
      </div>

      <!-- 修改导航菜单的active判断条件 -->
      <div class="top-nav">
        <!-- 维修计划：精确匹配路径 -->
        <router-link to="/device-admin/maintenance-plan" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/maintenance-plan' }"><span>维修计划</span></router-link>

        <!-- 维护日志：精确匹配路径 -->
        <router-link to="/device-admin/maintenance-log" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/maintenance-log' }"><span>维护日志</span></router-link>

        <!-- 预警：精确匹配路径 -->
        <router-link to="/device-admin/warning-alert" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/warning-alert' }"><span>预警</span></router-link>

        <!-- 查看所有设备：精确匹配路径 -->
        <router-link to="/device-admin/device-query" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/device-query' }"><span>查看所有设备</span></router-link>

        <!-- 所有维护计划：精确匹配路径 -->
        <router-link to="/device-admin/all-maintenance-plans" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/all-maintenance-plans' }"><span>所有维护计划</span></router-link>

        <!-- 新增：查询所有维修人员 -->
        <router-link to="/device-admin/repair-user-list" class="nav-item"
          :class="{ 'active': $route.path === '/device-admin/repair-user-list' }"><span>查询所有维修人员</span></router-link>
      </div>

      <div class="header-actions">
        <!-- 恢复四个操作图标 -->

        <router-link to="/she">
          <User class="icon" />
        </router-link>
        <Phone class="icon" />
        <!-- 删除铃铛图标 -->
        <router-link to="/login">
          <CircleClose class="icon" />
        </router-link>
      </div>
    </el-header>

    <!-- 新增主内容区域 -->
    <!-- 仅在精确匹配根路径时显示首页内容 -->
    <div class="main-content" v-show="$route.path === '/device-admin'">
      <el-main class="content-area">
        <!-- 统计卡片区域 -->
        <div class="stats-container">
          <el-row :gutter="20">
            <!-- 维护计划总数卡片 -->
            <el-col :span="12">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-number">{{ maintenancePlanCount }}</div>
                  <div class="stat-label">维护计划总数</div>
                  <div class="stat-icon blue-icon"><i class="el-icon-schedule"></i></div>
                </div>
              </el-card>
            </el-col>

            <!-- 维修计划总数卡片 -->
            <el-col :span="12">
              <el-card class="stat-card">
                <div class="stat-content">
                  <div class="stat-number">{{ repairPlanCount }}</div>
                  <div class="stat-label">维修计划总数</div>
                  <div class="stat-icon purple-icon"><i class="el-icon-document"></i></div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- ECharts图表区域 -->
          <div class="chart-container">
            <el-card>
              <div id="orderStatusChart" class="chart-content"></div>
            </el-card>
          </div>
        </div>

        <router-view />
      </el-main>
    </div>

    <router-view v-show="$route.path.startsWith('/device-admin/')"></router-view>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';
import { ElHeader, ElMain } from 'element-plus';
import { User, Phone, CircleClose } from '@element-plus/icons-vue';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';

// 声明组件名称
defineOptions({ name: 'SheHome' });

const route = useRoute();
const orderStatusChart = ref(null);
const maintenancePlanCount = ref(0); // 维护计划总数
const repairPlanCount = ref(0);     // 维修计划总数

// 获取维护计划总数
const fetchMaintenancePlans = async () => {
  try {
    const response = await request.get('/admin/getAllMaintenanceSchedule');
    if (response.code === 200) {
      maintenancePlanCount.value = response.data.length;
    }
  } catch (error) {
    ElMessage.error('获取维护计划失败');
    console.error(error);
  }
};

// 获取维修计划总数
const fetchRepairPlans = async () => {
  try {
    const response = await request.get('/admin/getAllRepair');
    if (response.code === 200) {
      repairPlanCount.value = response.data.length;
    }
  } catch (error) {
    ElMessage.error('获取维修计划失败');
    console.error(error);
  }
};

onMounted(async () => {
  // 获取统计数据
  await Promise.all([fetchMaintenancePlans(), fetchRepairPlans()]);

  // 初始化图表
  nextTick(() => {
    const chartDom = document.getElementById('orderStatusChart');
    if (chartDom) {
      orderStatusChart.value = echarts.init(chartDom);
      orderStatusChart.value.setOption({
        title: { text: '计划状态分布' },
        tooltip: {},
        series: [{
          name: '计划类型',
          type: 'pie',
          data: [
            { value: maintenancePlanCount.value, name: '维护计划' },
            { value: repairPlanCount.value, name: '维修计划' }
          ]
        }]
      });
    }
  });
});
</script>

<style scoped>
/* 合并所有样式到单个style标签 */
.she-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 顶端导航栏 - 统一深灰色背景 */
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #e9e9e9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Logo样式 */
.logo {
  display: flex;
  align-items: center;
  background-color: transparent;
  margin-right: 20px;
  /* 增加logo与导航菜单的间距 */
}

.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

/* 导航菜单 */
.top-nav {
  display: flex;
  flex: 1;
  /* 让导航菜单占据剩余空间 */
  margin: 0 10px;
  /* 减少左右外边距 */
  height: 100%;
  background-color: transparent;
  position: relative;
  z-index: 10;
}

/* 导航菜单项 - 三个菜单项平均分配空间 */
.nav-item {
  flex: 1;
  /* 平均分配空间 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #333 !important;
  font-size: 14px;
  font-weight: 500;
  padding: 0 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 11;
  text-decoration: none;
}

.nav-item.active {
  background-color: #dcdcdc;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #409EFF;
}

/* 操作图标区域 */
.header-actions {
  display: flex;
  gap: 20px;
  /* 平均分配空间 */
  margin-left: 20px;
  /* 增加与导航菜单的间距 */
  padding-left: 20px;
  border-left: 1px solid #dcdcdc;
  /* 添加分隔线 */
}

.icon {
  font-size: 20px;
  /* 适当缩小图标大小 */
  cursor: pointer;
  color: #333;
  background-color: transparent;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
  overflow: auto;
}

.content-wrapper {
  width: 100%;
  height: 100%;
}

/* 统计卡片样式 */
.stats-container {
  padding: 20px;
}

.stat-card {
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.stat-content {
  position: relative;
  padding: 15px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  color: #606266;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
}

.trend-up {
  color: #409eff;
}

.trend-down {
  color: #f56c6c;
}

.stat-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.blue-icon {
  background-color: #409eff;
}

.purple-icon {
  background-color: #722ed1;
}

.green-icon {
  background-color: #52c41a;
}

.pink-icon {
  background-color: #ff4d4f;
}

/* 待办事项样式 */
.todo-container {
  margin-top: 20px;
}

.todo-title {
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.todo-items {
  margin-bottom: 20px;
}

.todo-item {
  text-align: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.todo-label {
  display: block;
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
}

.todo-number {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

/* 图表样式 */
/* ECharts图表容器样式 */
.chart-container {
  width: 100%;
  height: 400px;
  /* 添加固定高度 */
  margin-top: 20px;
}

.chart-content {
  width: 100%;
  height: 100%;
  /* 继承容器高度 */
}

.chart-title {
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

/* 确保图表容器始终可见 */
.chart-content {
  min-height: 400px;
  transition: opacity 0.3s;
  /* 强制显示策略 */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 修复父级隐藏问题 */
:deep(.el-tab-pane) {
  overflow: visible !important;
}

/* 图表容器样式 */
.chart-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}

.chart-content {
  width: 100%;
  height: 100% !important;
  display: block !important;
  min-height: 400px !important;
  opacity: 1 !important;
}

:deep(.el-tab-pane) {
  overflow: visible !important;
}

#orderStatusChart {
  /* 新增渲染保障 */
  will-change: transform !important;
  contain: strict !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}
</style>